<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/home' }">主页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/note/list' }">我的笔记</el-breadcrumb-item>
      <el-breadcrumb-item>笔记列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-table :data="notes" style="width: 100%">
      <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
      <el-table-column prop="noteTitle" label="标题" width="250" align="center"></el-table-column>
      <el-table-column prop="username" label="作者" width="100" align="center"></el-table-column>
      <el-table-column prop="noteContent" label="内容" align="center">
        <template slot-scope="scope">
          {{ limitLength(scope.row.noteContent, 20) }}
        </template>
      </el-table-column>
      <el-table-column label="更新日期" width="150" align="center">
        <template slot-scope="scope">
          {{ new Date(scope.row.updateTime).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-search" circle size="mini"
                     @click="showNote(scope.row)"></el-button>
          <el-button type="primary" icon="el-icon-edit" circle size="mini"
                     @click="openEditDialog(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle size="mini"
                     @click="openDeleteConfirm(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination align="right" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                   :current-page="pageIndex" :page-sizes="[10, 20, 50]" :page-size="pageSize" :total="totalCount"
                   layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      notes: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0
    };
  },
  mounted() {
    this.getNotes();
  },
  methods: {
    async getNotes() {
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      };
      let config = {
        headers: {
          'Content-Type': 'application/json'
        },
        data: data
      };
      try {
        const response = await axios.post('/api/note/noteList', data, config);
        this.notes = response.data.data.list;
        this.totalCount = response.data.data.totalCount;

      } catch (error) {
        console.error(error);
      }
    },
    showNote(note) {
      let url = '/api/note/showNote/' + note.noteId;
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        let status = response.data.code;
        let message = '此笔记不存在！';
        if (status == 200) {
          this.$router.push({
            path: '/note/show',
            query: {noteId: note.noteId}
          });
        } else {
          let title = '操作失败';
          this.$alert(message, title, {
            confirmButtonText: '确定',
            callback: action => {
              this.getNotes();
            }
          });
        }
      })
    },
    // 弹出删除确认框
    openDeleteConfirm(Item) {
      let message = '此操作将永久删除【' + Item.noteTitle + '】笔记，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(Item);
      }).catch(() => {
      });
    },
    // 执行删除
    handleDelete(Item) {
      let url = '/api/note/deleteNote/' + Item.noteId;
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let status = response.data.code;
        let message = response.data.message;
        if (status == 203) {
          this.$message({
            message: '删除笔记成功！',
            type: 'success'
          });
          this.getNotes();
        } else if (status == 404) {
          this.$message({
            message: '笔记数据不存在或已被删除!',
            type: 'error'
          });
          this.getNotes();
        } else {
          let title = '操作失败';
          this.$alert(message, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    openEditDialog(note) {
      let url = '/api/note/showNote/' + note.noteId;
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        let status = response.data.code;
        let message = '此笔记不存在！';
        if (status == 200) {
          this.$router.push({
            path: '/note/edit',
            query: {noteId: note.noteId}
          });
        } else {
          let title = '操作失败';
          this.$alert(message, title, {
            confirmButtonText: '确定',
            callback: action => {
              this.getNotes();
            }
          });
        }
      })
    },
    sizeChangeHandle: function (val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getNotes();
    },
    currentChangeHandle: function (val) {
      this.pageIndex = val;
      this.getNotes();
    },
    indexMethod(index) {
      return index + 1;
    },
    limitLength(content, maxLength) {
      if (content && content.length > maxLength) {
        return content.substring(0, maxLength) + '...';
      }
      return content;
    }
  }
};
</script>
